<script setup>
import Repl from '@/components/Repl/Repl.vue'
import { ReplStore } from '@/components/Repl/store'
import '@vue/repl/style.css'
const prod = import.meta.env.PROD
let hash = location.hash.slice(1)
const store = new ReplStore({
  serializedState: null,
  defaultVueRuntimeURL: prod ? `/lib/vue.runtime.esm-browser.js` : `/src/runtime/vue-proxy`,
  defaultVueXURL: prod ? `/lib/vuex.esm-browser.prod.js` : `/src/runtime/vuex-proxy`,
  defaultSkrivetURL: prod ? `/lib/skrivet.js` : `/src/runtime/skrivet-proxy`,
  defaultVueServerRendererURL: prod
    ? `/lib/server-renderer.esm-browser.js`
    : `/src/runtime/vue-server-renderer-proxy`,
  defaultAntdURL: prod ? `/lib/antd.js` : `/src/runtime/antd-proxy`,
  defaultAntdIconURL: prod ? `/lib/antd-icons.js` : `/src/runtime/antd-icon-proxy`,
  defaultDayjsURL: prod ? `/lib/dayjs.js` : `/src/runtime/dayjs-proxy`
})

const sfcOptions = {
  script: {
    inlineTemplate: false,
    isProd: prod,
    reactivityTransform: true,
    defineModel: true
  },
  style: {
    isProd: prod
  },
  template: {
    isProd: prod
  }
}
</script>

<template>
  <Repl
    style="height: 100%"
    :ssr="false"
    :store="store"
    :show-compile-output="true"
    :auto-resize="true"
    :sfc-options="sfcOptions"
    :clear-console="false"
  />
</template>
